<template>
	<view>
		<view class="banner">
			<view class="marquee_container" style="--marqueeWidth--:-12em">
				<view class="marquee_text">{{marquee}}</view>
			</view>
			<u-swiper :list="list" :autoplay="false" mode="none" border-radius="0" height="300"></u-swiper>
		</view>
			
			<view class="menuItem" v-if="SHShow">
				<view class="menuHead">
					<view class="leftCon">
						<u-icon name="order" color="#51D1E7" size="35"></u-icon>
						<view class="labelName">
							驳船审核
						</view>
					</view>
					<view class="rightArrow">
						<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
					</view>
				</view>
				
				<view class="menuBody">
					<view class="item" @click="carInfo">
						<image src="../../static/search.png" mode=""></image>
						<view class="name">
							驳船审核
						</view>
					</view>
				</view>
			</view>
			
			<!-- <view class="menuItem" v-if="BCShow">
				<view class="menuHead">
					<view class="leftCon">
						<u-icon name="order" color="#51D1E7" size="35"></u-icon>
						<view class="labelName">
							驳船档案
						</view>
					</view>
					<view class="rightArrow">
						<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
					</view>
				</view>
				
				<view class="menuBody">
					<view class="item" @click="shipInfo">
						<image src="../../static/search.png" mode=""></image>
						<view class="name">
							驳船档案
						</view>
					</view>
				</view>
			</view> -->
			
			<view class="menuItem" v-if="BCShow">
				<view class="menuHead">
					<view class="leftCon">
						<u-icon name="order" color="#51D1E7" size="35"></u-icon>
						<view class="labelName">
							报港申请
						</view>
					</view>
					<view class="rightArrow">
						<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
					</view>
				</view>
				
				<view class="menuBody">
					<view class="item" @click="shipRequest">
						<image src="../../static/search.png" mode=""></image>
						<view class="name">
							报港申请
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				list: [{
					// image: '/static/img/bg.jpg'
					image: 'https://api.zlkj-port.com/prod-api/profile/img/bg.jpg'
				}],
				marquee:'',
				roleList: [],
				permit: '', // user的权限
				allow: '',	// portrole的权限
				portname: '',
				tel: '',		// 手机号
				level: '',
				department: '',
				listInfo: [],
				SHShow: false,	// 	审核权限
				BCShow: false,
			};
		},
		computed: {
			...mapState(['activePort', 'userInfo'])
		},
		onLoad(options) {
			this.allow = options.allow
			this.portname = options.portname
			// console.log(options)
			this.roleList = uni.getStorageSync("userInfo").roleName.split(',')
			// this.roleList.reverse()	// 数组返转，可以去掉
			this.permit = uni.getStorageSync("userInfo").permit
			this.tel = uni.getStorageSync("userInfo").tel
			uni.request({
				url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/YMss8TNkbNYTNOK',
				method: "get",
				success: (res) => { 
					 this.marquee = res.data.rows[0].MARQUEE
				}
			})
			this.power()
			this.getUserAllow()
		},
		methods: {
			// 驳船审核
			carInfo() {
				uni.navigateTo({
					url: './shipManage'
				})
			},
			// 驳船档案
			shipInfo() {
				uni.navigateTo({
					url: './shipBarge'
				})
			},
			// 报港申请
			shipRequest() {
				uni.navigateTo({
					url: './shipBrageApply'
				})
			},
			// 查看是否拥有驳船审核权限 shipConcat表
			power() {
				uni.request({
					url: 'https://api.zlkj-port.com/ZLBG/zlkj/concat/getShipInfo/' + this.tel,
					method: 'get',
					success: (res) => {
						if(res.data){
							this.SHShow = true
						}
					}
				})
			},
			// 驳船档案权限
			getUserAllow(){
				uni.request({
					url: 'https://api.zlkj-port.com/ZLBG/zlkj/concat/getInfo',
					method: 'post',
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					data: {
						telNumber: this.tel
					},
					success: (res) => {
						if(res.data) {
							this.BCShow = true
						}
					} 
				})
			},
			text() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(res)
						console.log(JSON.stringify(res.tempFilePaths));
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function (image) {
								console.log(image);
							}
						});
					}
				});
			}
			
		}
	}
</script>

<style lang="scss">
	.banner {}
	/*首页跑马灯效果*/
	@-webkit-keyframes around {
	from {
	   margin-left: 100%;
	}
	to {
	   /* var接受传入的变量 */
	   margin-left: var(--marqueeWidth--);
	}
	}
	@keyframes around {
	from {
	   margin-left: 100%;
	}
	to {
	   /* var接受传入的变量 */
	   margin-left: var(--marqueeWidth--);
	}
	}
	.marquee_container{
	  background-color: #497ac8;
	  height: 50rpx;
	  line-height: 44rpx;
	  position: relative;
	  width: 100%;
	  margin-top:0rpx;
	}
	.marquee_container:hover{
	  /* 不起作用 */
	  -webkit-animation-play-state: paused;
	          animation-play-state: paused;
	}
	.marquee_text{
	  color:#b50000;
	  font-size: 30rpx;
	  display: inline-block;
	  white-space: nowrap;
	  -webkit-animation-name: around;
	          animation-name: around;
	  -webkit-animation-duration: 10s;
	          animation-duration: 10s;  /*过渡时间*/
	  -webkit-animation-iteration-count: infinite;
	          animation-iteration-count: infinite;
	  -webkit-animation-timing-function:linear;
	          animation-timing-function:linear;
	}
	/*首页跑马灯效果*/
	.menuItem {
		width: 710rpx;
		margin: 0 auto;

		.menuHead {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.leftCon {
				display: flex;
				align-items: center;

				.labelName {
					margin-left: 10rpx;
					color: #868887;
				}
			}
		}

		.menuBody {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.item {
				width: 50%;
				border: 1rpx solid #EFEFEF;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 355rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 10rpx;
				}

				.name {
					font-size: 30rpx;
					color: #868887;
				}
			}
		}
	}
</style>
